<template>
  <div>
    <a-card :bordered="false">
      <div class="title">通用积分规则</div>
      <a-table ref="baseTable" size="middle" rowKey="id" :columns="baseColumns" :dataSource="baseDataSource"
        :loading="baseLoading" :pagination="false" class="j-table-force-nowrap">
        <span slot="baseAction" slot-scope="text, record">
          <a v-has="'sysPointsRule:edit'" @click="handleBaseEdit(record)">设置</a>
        </span>
        <span slot="ruleType" slot-scope="text">
          <span v-if="text === 11">积分有效期</span>
          <!-- <span v-if="text === 12">积分名称自定义</span> -->
          <span v-if="text === 13">积分兑换比例</span>
          <span v-if="text === 14">积分多少天生效</span>
          <!-- <span v-if="text === 21">是否积分抵现</span>
          <span v-if="text === 22">抵现金额上限</span>
          <span v-if="text === 23">抵现是否赠送积分</span>
          <span v-if="text === 24">积分使用门槛</span>
          <span v-if="text === 25">积分抵现消费门槛</span>
          <span v-if="text === 31">注册送积分</span>
          <span v-if="text === 32">消费赠送积分</span> -->
        </span>
        <span slot="ruleVal" slot-scope="text, record">
          <span v-if="record.ruleType === 11" class="ruleType">
            <!-- 值-1每年最后一天失效 0永久有效 值是大于0则表示多少天有效 -->
            <span v-if="text == -1">每年最后一天失效</span>
            <span v-if="text == 0">永久有效</span>
            <span v-if="text > 0">{{ text }}天之内有效</span>
          </span>
          <!-- <span v-if="record.ruleType == 12" class="ruleType">{{ text }}</span> -->
          <span v-if="record.ruleType == 13" class="ruleType">{{ text }}积分=1元</span>
          <span v-if="record.ruleType == 14" class="ruleType">{{ text }}天</span>
          <!-- <span v-if="record.ruleType == 21" class="ruleType">{{ text == 0 ? '不开启' : '开启' }}</span>
          <span v-if="record.ruleType == 22" class="ruleType">最多抵扣消费金额{{ text }}%</span>
          <span v-if="record.ruleType == 23" class="ruleType">{{ text == 0 ? '不赠送' : '赠送' }}</span>
          <span v-if="record.ruleType == 24" class="ruleType">{{
            text == 0 ? '无门槛' : '达到' + text + '积分可用'
          }}</span>
          <span v-if="record.ruleType == 25" class="ruleType">{{
            text == 0 ? '无门槛' : '最低消费' + text / 100 + '元'
          }}</span>
          <span v-if="record.ruleType == 31" class="ruleType">{{ text == 0 ? '不赠送' : '赠送' + text + '积分' }}</span>
          <span v-if="record.ruleType == 32" class="ruleType">{{
            text == 0 ? '不赠送' : '消费1元送' + text + '积分'
          }}</span> -->
        </span>
      </a-table>

      <!-- 表单区域 -->
      <PosPointsRuleModal ref="baseModalForm" @ok="loadBaseRule"></PosPointsRuleModal>
    </a-card>
    <a-card :bordered="false" style="margin-top: 15px">
      <div class="title">积分消费方案</div>
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">
          <a-row :gutter="24">
            <a-col :xl="4" :lg="7" :md="8" :sm="24">
              <a-form-item label="方案名称">
                <a-input v-model="queryParam.planNm" allowClear></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="4" :lg="7" :md="8" :sm="24">
              <a-form-item label="是否启用">
                <a-select v-model="queryParam.bizStatus" allowClear>
                  <a-select-option :value="1">是</a-select-option>
                  <a-select-option :value="0">否</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="4" :lg="7" :md="8" :sm="24">
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                <a-button type="default" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
      </div>

      <!-- table区域-begin -->
      <div>
        <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource"
          :pagination="ipagination" :loading="loading" class="j-table-force-nowrap" @change="handleTableChange">
          <span slot="action" slot-scope="text, record">
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a @click="handleProdScope(record)">设置商品范围</a>
          </span>
          <span slot="bizStatusBool" slot-scope="text, record">
            <a-switch v-model="record.bizStatusBool" @change="handleStatus(record)" />
          </span>
        </a-table>
      </div>
      <!-- table区域-end -->

      <!-- 表单区域 -->
      <posPointsPlan-modal ref="modalForm" @ok="modalFormOk" @close="modalFormOk"></posPointsPlan-modal>
      <posPointsPlanProdScope-modal ref="modalForm1" @ok="modalFormOk1" @close="modalFormOk1"></posPointsPlanProdScope-modal>
    </a-card>
  </div>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { postAction, getAction } from '@/api/manage'
import PosPointsRuleModal from './modules/PosPointsRuleModal'
import PosPointsPlanModal from './modules/PosPointsPlanModal'
import PosPointsPlanProdScopeModal from './modules/PosPointsPlanProdScopeModal'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'PosMarketPointsRule',
  mixins: [JeecgListMixin],
  components: {
    PosPointsRuleModal,
    PosPointsPlanModal,
    PosPointsPlanProdScopeModal,
  },
  data() {
    return {
      title: '设置积分规则',
      /* 数据源 */
      baseDataSource: [],
      /* table加载状态 */
      baseLoading: false,
      loading: false,
      // 表头
      baseColumns: [
        {
          title: '规则名称',
          align: 'center',
          dataIndex: 'ruleType',
          scopedSlots: { customRender: 'ruleType' },
        },
        {
          title: '规则详情',
          align: 'center',
          dataIndex: 'ruleVal',
          scopedSlots: { customRender: 'ruleVal' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'baseAction' },
        },
      ],
      // 表头
      columns: [
        {
          title: '方案名称',
          align: 'center',
          dataIndex: 'planNm',
        },
        {
          title: '适用门店',
          align: 'center',
          dataIndex: 'orgNames',
          customRender: (text) => {
            return text + '/全部门店'
          }
        },
        {
          title: '适用商品',
          align: 'center',
          dataIndex: 'prodScope',
          customRender: (text) => {
            //0全部 5分类 10指定商品 20按照价格自动匹配
            if (text == 0) {
              return '全部'
            }

            if (text == 5) {
              return '指定分类'
            }

            if (text == 10) {
              return '指定商品'
            }
          },
        },
        {
          title: '是否启用',
          align: 'center',
          dataIndex: 'bizStatusBool',
          scopedSlots: { customRender: 'bizStatusBool' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      url: {
        baseList: '/marketing/posPointsRule/list',
        list: '/marketing/posPointsPlan/list',
        changeBizStatusUrl: '/marketing/posPointsPlan/changeBizStatus',
      },
    }
  },
  created() {
    this.loadBaseRule()
  },
  methods: {
    getParams() { },
    loadBaseRule() {
      var params = this.getParams()
      this.baseLoading = true
      getAction(this.url.baseList, params)
        .then((res) => {
          if (res.success) {
            this.baseDataSource = res.result.records || res.result
            this.baseDataSource.forEach((val) => {
              val.bizStatus = val.bizStatus === 1
            })
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {
          this.baseLoading = false
        })
    },
    handleStatus(record) {
      this.loading = true
      let toModify = {}
      toModify.id = record.id
      toModify.bizStatus = record.bizStatusBool ? 1 : 0
      postAction(this.url.changeBizStatusUrl, toModify)
        .then((res) => {
          if (res.success) {
            this.$message.success('操作成功')
          } else {
            this.$message.warn(res.message)
            this.loadData()
          }
        })
        .finally(() => (this.loading = false))
    },
    handleBaseEdit: function (record) {
      this.$refs.baseModalForm.edit(record)
      this.$refs.baseModalForm.title = '设置规则'
      this.$refs.baseModalForm.disableSubmit = false
    },
    modalFormOk1() {
      // 新增/修改 成功时，重载列表
      this.loadData();
      //清空列表选中
      this.onClearSelected()
    },
    handleProdScope(record) {
      this.$refs.modalForm1.edit(record);
      this.$refs.modalForm1.title = "设置商品范围";
      this.$refs.modalForm1.disableSubmit = false;
    }
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';

.title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

.ruleType {
  color: @primary-color;
}
</style>